@import '~scss/variables';

.body {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 20px);
  bottom: 12px !important;
}

.header {
  display: flex;
  align-items: center;
  padding-right: 50px;
  z-index: 200;

  img {
    margin-right: 8px;
  }

  .opts {
    flex: 1;
    display: flex;
    justify-content: flex-end;

    .time {
      margin-right: 12px;
    }

    .refresh {
      width: 32px;
      height: 32px;
      border-radius: 4px;
      padding: 0px;
      margin: 0px;
      margin-right: 12px;
    }
  }
}

.metricEmpty {
  height: 396px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.current {
  margin-top: 12px;
  padding: 12px;
  background: $light-color01;
  height: 100%;
  flex: 1;
  height: calc(100% - 396px);

  .main {
    height: 100%;
    border: 1px solid #e4e9ee;
    border-radius: 1px;

    .title {
      height: 56px;
      padding: 0px 12px;
      display: flex;
      align-items: center;
      background: $light-color01;
      box-shadow: inset 0px -1px 0px $light-color03;

      span {
        display: block;
        font-weight: 600;
        font-size: 12px;
        line-height: 20px;
        color: $dark-color01;
      }
    }

    .body {
      overflow-y: auto;
      height: calc(100% - 56px);

      .line {
        padding: 18px 12px;
        display: flex;
        align-items: center;
        box-shadow: inset 0px -1px 0px #f0f4f8;

        span {
          display: block;
          word-break: break-all;
        }
      }
    }

    .time {
      width: 240px;
    }

    .value {
      width: 240px;
    }

    .metric {
      width: 856px;
    }
  }
}
